<template>
	<view class="location">
		<view class="container">
			<view class="item">
				<view>获奖者</view>
				<input type="text" v-model="signatureValue" placeholder="用于证书上署名" />
			</view>
			<view class="item">
				<view>收件人</view>
				<input type="text" v-model="nameValue" placeholder="名字" />
			</view>
			<view class="item">
				<view>手机号码</view>
				<input type="text" v-model="phoneValue" placeholder="手机号" />
			</view>
			<view class="item">
				<view>所在地区</view>
				<view @click="show=true" :class="{'active':province}">{{province?province+'、'+city+'、'+area:'省、市、区'}}
				</view>
				<u-picker v-model="show" mode="region" @confirm="headlePlace"></u-picker>
			</view>
			<view class="item1">
				<view>详细地址</view>
				<textarea type="text" v-model="addressValue" placeholder="详细地址" />
			</view>
			<view class="title">
				Tips：<view :style="{color}">提交即视为领取</view>，需支付 38元 制作费
			</view>
			<view class="title1">支付成功后，请刷新页面</view>
		</view>
		<view class="footer1">
			<view :style="{background:color,'boxShadow': '0upx 0upx 4upx 0upx'+color}" @click="headleSubmit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //选择器
				province: null, //省
				city: null, //市
				area: null, //区
				signatureValue: null,
				phoneValue: null, //收件人手机号
				nameValue: null, //名字
				addressValue: null, //详细地址
				color: null, //颜色
				Rid: 0, //用户id
				userphone: null, //用户手机号
				payUrl: null,
				timer: null
			}
		},
		onLoad(option) {
			this.Rid = option.id
			this.userphone = option.phone
			this.payUrl = decodeURIComponent(option.payUrl)
			this.color = option.color
			let that = this
			that.getData()

		},

		methods: {
			// 更新
			getData() {
				let that = this
				that.$myRequesy({
					url: 'chaxun/certificate',
					data: {
						id: that.Rid,
						phone: that.userphone
					}
				}).then(res => {
					if (res.code === 0) {
						uni.hideLoading()
						if (res.data.is_submit) {
							uni.redirectTo({
								url: '../paysuccess/index?id=' + that.Rid + '&phone=' + that.userphone+'&color='+that.color,
							})
						}
					}
				})
			},

			//校验手机格式
			checkMobile(mobile) {
				return RegExp(/^1[3-9]\d{9}$/).test(mobile);
			},
			headleShow() {
				uni.navigateTo({
					url: '../credential/index'
				})
			},
			//提交
			headleSubmit() {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					let that = this
					let date = new Date().getTime()
					let num1 = uni.getStorageSync('hello')
				 if (num1 && (num1 + 300000 > date)) {
						uni.showToast({
							title: "支付过于频繁，请五分钟后再试",
				 		icon: "none",
							mask: true
						})

					} else if (that.city !== null && that.addressValue.trim() && that.checkMobile(that.phoneValue) && that.nameValue.trim() && that.signatureValue.trim()) {						
						let date = new Date().getTime()
						uni.setStorageSync('hello', date);
						that.$myRequesy({
							url: 'chaxun/add-addr',
							method: "POST",
							data: {
				 			id: that.Rid,
								signature: that.signatureValue,
								phone: that.userphone,
								receive_name: that.nameValue,
								receive_phone: that.phoneValue,
								receive_province: that.province,
								receive_city: that.city,
				 			    receive_area: that.area,
								receive_addr: that.addressValue
							}
						}).then(res => {
							uni.showLoading()
							if (res.code === 0) {
								that.$myRequesy({
									url: 'tl/create_pay',
									method: 'POST',
									data: {
										id: that.Rid,
										phone: that.userphone
									}
								}).then(res => {
									if (res.code === 0) {
										uni.hideLoading()
										uni.showToast({
											title: `本次支付优惠${res.data.discount}元`,
											icon: "none",
											mask:true
										})
										setTimeout(() => {
											location.href = res.data.url
										}, 2000)

									} else if (res.code === 3020) {
										uni.hideLoading()
										uni.showToast({
											title: "23点-7点:系统维护中",
											icon: "none"
										})
									} else {
										uni.hideLoading()
										uni.showToast({
											title: "系统繁忙",
											icon: "none",
											mask:true
										})
									}
								})
							} else if (res.code === 3019) {
								uni.showToast({
									title: "您已支付,请勿重复提交",
									icon: "none"
								})
								uni.navigateBack()
							}
						})
					} else {
						uni.showToast({
							title: "请正确填写每一项",
							icon: "none"
						})
					}
			 }, 1200)


			},

			// 地区选择器
			headlePlace(e) {
				this.province = e.province.label
				this.city = e.city.label
				this.area = e.area.label
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import "uview-ui/index.scss";

	.location {
		.container {
			margin: 24upx 40upx 0upx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 36upx;

				view:first-child {
					color: rgba(0, 0, 0, 0.8);
				}

				view:nth-child(2) {
					color: rgba(0, 0, 0, 0.5);
					width: 516upx;
					height: 88upx;
					line-height: 88upx;
					border-radius: 24upx;
					background-color: rgba(244, 245, 244, 100);
					font-size: 28upx;
					padding-left: 30upx;
					box-sizing: border-box;
				}

				.active {
					color: #000 !important;
				}

				input {
					width: 516upx;
					height: 88upx;
					border-radius: 24upx;
					background-color: rgba(244, 245, 244, 100);
					color: rgba(16, 16, 16, 100);
					font-size: 28upx;
					padding-left: 30upx;
					box-sizing: border-box;
				}


			}

			.item1 {
				display: flex;
				justify-content: space-between;

				view {
					padding-top: 15upx;
					color: rgba(0, 0, 0, 0.8);
				}

				textarea {
					width: 516upx;
					height: 186upx;
					border-radius: 24upx;
					background-color: rgba(244, 245, 244, 100);
					color: rgba(16, 16, 16, 100);
					font-size: 28upx;
					padding: 24upx 30upx;
					box-sizing: border-box;
				}
			}

			.title {
				margin-top: 80upx;
				color: rgba(0, 0, 0, 0.5);
				font-size: 26upx;
				display: flex;
				justify-content: center;

				view {
					color: $uni-color-orange;
				}
			}

			.title1 {
				margin-top: 20upx;
				text-align: center;
				font-size: 28upx;
				// font-weight: 600;
			}
		}

	}
</style>
